<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        .stop - 调用 event.stopPropagation()。
        .prevent - 调用 event.preventDefault()。
        .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 
        .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
        .native - 监听组件根元素的原生事件。
        .once - 只触发一次回调。
        .left - (2.2.0) 只当点击鼠标左键时触发。
        .right - (2.2.0) 只当点击鼠标右键时触发。
        .middle - (2.2.0) 只当点击鼠标中键时触发。
        .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
    -->
    <div id="box">
        <div class="parentdiv" @click.self="parentFn">
            parentdiv
            <div class="childdiv" @click="childFn">
                childdiv
            </div>
            <!-- 解决方案 -->
            <!-- <div class="childdiv" @click.stop="childFn">
                childdiv
            </div> -->
        </div>
        <input type="text" @keyup.enter="enter" @keydown.up="top()">
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#box",
            data:{
              
            },
            methods:{
                parentFn(){console.log("parentFn");},
                childFn(){console.log("childFn");},
                enter(){console.log("用户敲回车了");},
                top(){console.log("按了上键");}
            }
        })
    </script>
</body>
</html>